<template>
    <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
            :mode="mode" />
        <!-- 使用 @onChange 事件 -->
        <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
            :mode="mode" @onCreated="handleCreated" @onChange="handleOnChange" />
    </div>
</template>
<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import type { IEditorConfig, IDomEditor, IToolbarConfig } from '@wangeditor/editor'
import { createEditor, DomEditor } from '@wangeditor/editor'
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('<p></p>')

// 模拟 ajax 异步获取内容
onMounted(() => {
    setTimeout(() => {
        valueHtml.value = ''
        console.log(valueHtml.value);

    }, 1500)
})

const toolbarConfig: Partial<IToolbarConfig> = {  // TS 语法
    /* 工具栏配置 */
    excludeKeys: [
        'insertLink',
        'group-video', // 排除菜单组，写菜单组 key 的值即可
    ]
}

const emit = defineEmits(["editorcontent"]);

// 定义 onChange 事件处理函数
const handleOnChange = (editor: IDomEditor) => {
    console.log('content', editor.children)
    let content = editor.children
    const editor1 = createEditor({ content })
    const html = editor.getHtml()
    const text = editor.getText()
    emit('editorcontent', html)
    console.log('editor1', html);

    const toolbar = DomEditor.getToolbar(editor)

    const curToolbarConfig = toolbar.getConfig()
    console.log('工具栏', curToolbarConfig.toolbarKeys) // 当前菜单排序和分组

}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    console.log(editorRef.value);

}

const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: { uploadImage: {} },
}
//上传图片的配置

editorConfig.MENU_CONF['uploadImage'] = {
    async customUpload(file, insertFn) {
        console.log('customUpload', file)
        const formData = new FormData();
        formData.append('file', file); // 后端期望的参数名可能是 upload_file
        formData.append('type', 'editor');    // 添加额外字段
        formData.append('user_id', '123');    // 自定义业务参数

        const response = await fetch(Config.serverUrl + '/upload/images', {
            method: 'POST',
            body: formData,
        });
        const result = await response.json();
        if (result.success) {
            insertFn(Config.serverUrl + result.data.url); // 插入图片 URL
        } else {
            alert('上传失败：' + result.message);
        }
    },

    // 单个文件的最大体积限制，默认为 2M
    maxFileSize: 10 * 1024 * 1024, // 1M

    // 跨域是否传递 cookie ，默认为 false
    withCredentials: true,

    // 超时时间，默认为 10 秒
    timeout: 5 * 1000, // 5 秒
    // 上传之前触发
    onBeforeUpload(file: File) {
        // TS 语法
        // onBeforeUpload(file) {    // JS 语法
        // file 选中的文件，格式如 { key: file }
        return file

        // 可以 return
        // 1. return file 或者 new 一个 file ，接下来将上传
        // 2. return false ，不上传这个 file
    },

    // 上传进度的回调函数
    onProgress(progress: number) {
        // TS 语法
        // onProgress(progress) {       // JS 语法
        // progress 是 0-100 的数字
        console.log('progress', progress)
    },

    // 单个文件上传成功之后
    onSuccess(file: File, res: any) {
        // TS 语法
        // onSuccess(file, res) {          // JS 语法
        console.log(`${file.name} 上传成功`, res)
    },

    // 单个文件上传失败
    onFailed(file: File, res: any) {
        // TS 语法
        // onFailed(file, res) {           // JS 语法
        console.log(`${file.name} 上传失败`, res)
    },

    // 上传错误，或者触发 timeout 超时
    onError(file: File, err: any, res: any) {
        // TS 语法
        // onError(file, err, res) {               // JS 语法
        console.log(`${file.name} 上传出错`, err, res)
    },
}


</script>
<style lang="scss" scoped></style>